<template>
  <el-form class="login-form"
           status-icon
           :rules="loginRules"
           ref="loginForm"
           :model="loginForm"
           label-width="0">
<!--    <el-form-item v-if="tenantMode" prop="tenantId">-->
<!--      <el-input size="small"-->
<!--                @keyup.enter.native="handleLogin"-->
<!--                v-model="loginForm.tenantId"-->
<!--                auto-complete="off"-->
<!--                :placeholder="$t('login.tenantId')">-->
<!--        <i slot="prefix" class="icon-quanxian"/>-->
<!--      </el-input>-->
<!--    </el-form-item>-->
    <el-form-item prop="username">
      <el-input size="small"
                @keyup.enter.native="handleLogin"
                v-model="loginForm.username"
                auto-complete="off"
                :placeholder="$t('login.username')">
        <i slot="prefix" class="icon-yonghu"/>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input size="small"
                @keyup.enter.native="handleLogin"
                :type="passwordType"
                v-model="loginForm.password"
                auto-complete="off"
                :placeholder="$t('login.password')">
        <i class="el-icon-view el-input__icon" slot="suffix" v-if="passwordType != 'password'" @click="passwordType = 'password'"/>
        <img class="el-icon-view closeEye" slot="suffix" v-else src="../../../public/img/commImg/closeEye.png" @click="passwordType = ''"/>
        <i slot="prefix" class="icon-mima"/>
      </el-input>
    </el-form-item>
<!--    <el-form-item v-if="this.website.captchaMode" prop="code">-->
<!--      <div class="captchaCode">-->
<!--        <p>-->
<!--          <span>请点击下图中<span style="color: red;">所有的</span>笔</span>-->
<!--          <span class="login-code-change"><i class="el-icon-refresh-right"></i>刷新</span>-->
<!--        </p>-->
<!--        <div class="captBox">-->
<!--          <el-checkbox-group v-model="checkList">-->
<!--            <el-checkbox :label="img.id" v-for="img in imgs" :key="img.id" >-->
<!--              <img :src="img.src" alt="">-->
<!--            </el-checkbox>-->
<!--          </el-checkbox-group>-->
<!--        </div>-->
<!--      </div>-->

<!--    </el-form-item>-->
    <el-form-item>
      <!--<el-row :span="24">-->
        <!--<el-col :span="12">-->
      <div class="yzItem">
        <el-input size="small"
                  @keyup.enter.native="handleLogin"
                  v-model="loginForm.code"
                  auto-complete="off"
                  :placeholder="$t('login.code')">
          <i slot="prefix" class="icon-yanzhengma"/>
        </el-input>
        <div class="login-code">
          <img class="cursorD login-code-img" @click="refreshCode" :src="loginForm.image"/>
          <p class="cursorD login-code-img-change" @click="refreshCode">不清晰，换一图</p>
        </div>
      </div>

        <!--</el-col>-->
        <!--<el-col :span="12">-->

        <!--</el-col>-->
      <!--</el-row>-->
    </el-form-item>
    <el-button class="login-submit" type="primary" @click="handleLogin">{{$t('login.submit')}}</el-button>
    <!--<p class="tip-register">没有账号?去<span class="registe"  @click="register">注册</span></p>-->
    <!--<img class="ocodeImg cursorD" @mouseenter="showOcode=true" @mouseleave="showOcode=false" src="../../../public/img/commImg/ocode.jpg" alt="">-->
    <!--<img :class="[{ocode:showOcode},{noImg:!showOcode} ]" src="../../../public/img/commImg/ocode.jpg" alt="">-->

<!--        <el-input size="small"-->
<!--                  @keyup.enter.native="handleLogin"-->
<!--                  v-model="loginForm.code"-->
<!--                  auto-complete="off"-->
<!--                  :placeholder="$t('login.code')">-->
<!--&lt;!&ndash;          <i slot="prefix" class="icon-yanzhengma"/>&ndash;&gt;-->
<!--        </el-input>-->
<!--        <div class="login-code">-->
<!--          <img :src="loginForm.image" class="login-code-img"-->
<!--          />-->
<!--        </div>-->
<!--        <p class="login-code-change" @click="refreshCode">{{$t('login.changeCode')}}</p>-->


  </el-form>
</template>

<script>
  import {mapGetters} from "vuex";
  import {info} from "@/api/system/tenant";
  import {getCaptcha} from "@/api/user";
  import {getTopUrl} from "@/util/util";

  export default {
    name: "userlogin",
    data() {
      return {
        showOcode:false,
        tenantMode: this.website.tenantMode,
        loginForm: {
          //租户ID
          tenantId: "000000",
          //用户名
          username: "",
          //密码
          password: "",
          //账号类型
          type: "account",
          //验证码的值
          code: "",
          //验证码的索引
          key: "",
          //预加载白色背景
          image: "",
        },
        loginRules: {
          tenantId: [
            {required: false, message: "请输入租户ID", trigger: "blur"}
          ],
          username: [
            {required: true, message: "请输入帐号", trigger: "blur"}
          ],
          password: [
            {required: true, message: "请输入密码", trigger: "blur"},
            {min: 1, message: "密码长度最少为8位", trigger: "blur"}
          ]
        },
        passwordType: "password",
        remeberPassWord: false,
        checkList:[],
        imgs:[
          {
            id:1,
            src:require('../../../public/img/commImg/left-login.png')
          },{
            id:2,
            src:require('../../../public/img/commImg/left-login.png')
          },{
            id:3,
            src:require('../../../public/img/commImg/left-login.png')
          },{
            id:4,
            src:require('../../../public/img/commImg/left-login.png')
          },
          {
            id:5,
            src:require('../../../public/img/commImg/left-login.png')
          },{
            id:6,
            src:require('../../../public/img/commImg/left-login.png')
          },{
            id:7,
            src:require('../../../public/img/commImg/left-login.png')
          },{
            id:8,
            src:require('../../../public/img/commImg/left-login.png')
          },
        ],
      };
    },
    created() {
      this.getTenant();
      this.refreshCode();
    },
    watch: {
      showOcode:{
        handler(){
          this.$emit('showOcode',this.showOcode)
        },immediate:true
      }
    },
    computed: {
      ...mapGetters(["tagWel"])
    },
    props: [],
    methods: {
      refreshCode() {
        getCaptcha().then(res => {
          const data = res.data;
          this.loginForm.key = data.key;
          this.loginForm.image = data.image;
        })
      },
      handleLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            const loading = this.$loading({
              lock: true,
              text: '登录中,请稍后。。。',
              spinner: "el-icon-loading"
            });
            this.$store.dispatch("LoginByUsername", this.loginForm).then(() => {
              this.$router.push({path: this.tagWel.value});
              loading.close();
            }).catch(() => {
              loading.close();
              this.refreshCode();
            });
          }
        });
      },
      getTenant() {
        let domain = getTopUrl();
        // 临时指定域名，方便测试
        //domain = "https://企业级微服务.vip";
        info(domain).then(res => {
          const data = res.data;
          if (data.success && data.data.tenantId) {
            this.tenantMode = false;
            this.loginForm.tenantId = data.data.tenantId;
            this.$parent.$refs.login.style.backgroundImage = `url(${data.data.backgroundUrl})`;
          }
        })
      },
       register() {
      this.$router.push({
        path:"/register",
      });
    },
    }
  };
</script>

<style scoped lang="scss">
.tip-register{
  cursor:pointer;
  font-size: 16px;
  display: flex;
  justify-content: center;
  .registe{
    color:red;
  }
}
.ocodeImg{
  position: absolute;
  width: 40px;
  right: 10px;
  bottom: 10px;
  opacity: 1;
  transition: all .5s linear;
}
.ocode{
  position: absolute;
  width: 100px;
  right: -100px;
  bottom: 0px;
  opacity: 1;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  transition: all .5s linear;
}
.noImg{
  position: absolute;
  width: 0px;
  right: 0;
  bottom: 0;
  transition: all .5s linear;
}
  .el-button--primary{
    background: #1C7DF0 !important;
  }
  .el-form-item__content{
    margin-left:0px !important;
  }
</style>
